<template>
  <div  id="chart5" style="width: 100%;height:100%;"></div>
</template>

<script>
export default {
  name: 'echart5',
  props: {
    dataList1: Object
  },
  data() {
    return {}
  },
  mounted() {
    // this.initEcharts1()
  },
  methods: {

    initEcharts2: function(dataList1, index) {
      // var indicator = dataList1

      let i = -1
      var indicator = [{
        text: '规模实力',
        max: 80
      },
        {
          text: '结构合力',
          max: 100
        },
        {
          text: '价值效力',
          max: 80
        },
        {
          text: '创新活力',
          max: 80
          //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
        },
        {
          text: '政策助力',
          max: 80
        },
        {
          text: '城市魅力',
          max: 80
        }

      ]
      var dataArr = [{
        value: dataList1,
        itemStyle: {
          normal: {
            lineStyle: {
              color: '#4A99FF'
              // shadowColor: '#4A99FF',
              // shadowBlur: 10,
            },
            shadowColor: '#4A99FF',
            shadowBlur: 10
          }
        },
        areaStyle: {
          normal: { // 单项区域填充样式
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [{
                offset: 0,
                color: '#4A99FF'
              }, {
                offset: 0.5,
                color: 'rgba(0,0,0,0)'
              }, {
                offset: 1,
                color: '#4A99FF'
              }],
              globalCoord: false
            },
            opacity: 1 // 区域透明度
          }
        }
      }
      ]
      var colorArr = ['#4A99FF', '#4BFFFC'] //颜色
      var option = {
        // backgroundColor: '#101736',
        title: {
          show: true,
          text: index,
          // x: "4%",
          x: 'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'center',
          textStyle: {
            color: '#f4f83c',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'
          }
        },
        color: colorArr,
        radar: {
          // shape: 'circle',
          nameGap: 7, //控制文件间距
          name: {
            textStyle: {
              color: '#fff',
              fontSize: this.transformFontSize(15)
            },
            formatter: (a,b) => {
              i++;
              if(i== 0 || i == 3){
                return `${a}${dataList1[i]}`
              }else{
                return `${a}\n${dataList1[i]}`
              }
              // return `{a|${a}}\n{b|${dataList1[i]}}`
            }
          },
          indicator: indicator,
          splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: { // 分隔区域的样式设置。
              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: { //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#153269'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#113865', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          }
        },
        series: [{
          type: 'radar',
          symbolSize: 6,
          // symbol: 'angle',
          data: dataArr
        }]
      }
      var myChart = this.$echarts.init(document.getElementById('chart5'))

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      window.addEventListener('resize', () => {
        myChart.resize()
        console.log('执行了')

        // this.chartssize（chartBox,myChartsize）
      })
    },
    //重置大小
    chartssize(container, charts) {
      function getStyle(el, name) {
        if (window.getComputedStyle) {
          return window.getComputedStyle(el, null)
        } else {
          return el.currentStyle
        }
      }

      var wi = getStyle(container, 'width').width
      var hi = getStyle(container, 'height').height
      charts.style.width = wi
      charts.style.height = hi
    },
    // 根据不同的屏幕宽度换算字体大小
    transformFontSize(fontsize) {
      // 获取屏幕宽度
      const width = window.innerWidth
      const ratio = width / 1920
      // 取下整
      return parseInt(fontsize * ratio)
    }
  },
  beforeDestoryed() {
    // 组件销毁前移除监听,防止内存泄露
    window.removeEventListener('resize')
  }
}
</script>

<style scoped>

</style>
